<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">


      <title>title</title>

      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
      <link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
      <style>
      body{background-color: #fff}
        #header { background: #fff; height:50px;background-color: #fc6d4d}
      .aui-bar-nav{background-color: #fff;position: relative;}
        .aui-bar-nav .aui-btn .aui-iconfont,.aui-bar-nav .aui-title{color: #333}
      body{margin: 0;background-color: #fff}
      img{border: none}
      section{width: 100%;box-sizing: border-box;padding: 20px 0px;padding-bottom: 24px;}
      h1,h2,h3,h4,h5,h6{font-weight: normal;;}
     .rw{padding: 0 15px;padding-bottom: 23px;border-bottom: 1px solid #F0F0F0;margin-bottom: 14px;box-sizing: border-box;width: 100%}
     .rw .img{width: 58px;height: 58px;box-sizing: border-box;border-radius: 50%;display: inline-block;overflow: hidden;margin-right: 14px;float: left;}
       .rw .img img{width: 100%;}
      .rw .te{float: left;}
       .rw .te h4{margin-top: 9px;color: #333;font-size: 13px;margin-bottom: 14px;line-height: 14px;display: inline-block;margin-right:8px;}
       .rw .te img{width: 50px;height: 13px;display: inline-block;vertical-align: middle;}
     .rw .te p{color: #999;font-size: 12px;line-height: 13px;}
     .zs{padding: 0 15px;margin-bottom: 14px;padding-bottom:5px;border-bottom: 1px solid #F0F0F0;width: 100%;box-sizing: border-box;}
      .zs .ti *{display: inline-block;}
      .zs .ti span{;background-color: #fc8622;width: 3px;height: 12px;margin-right: 6px}
      .zs .ti h4{color: #333;line-height: 15px;font-size: 15px;margin:0;margin-bottom: 15px;}
        .zs .img { display: flex;width: 100%;padding: 0;box-sizing: border-box;justify-content: space-between;}
      .zs .img .col{padding: 0;margin-right: 12px;    width: 32%;;float: left;box-sizing: border-box;margin-bottom: 10px;}
      .zs .img .col img{width: 100%;display: block;height: 153px;}
      .zwpj{padding: 0 15px;margin-bottom: 15px;padding-bottom: 26px;border-bottom: 1px solid #F0F0F0;width: 100%;box-sizing: border-box;}
      .zwpj .ti *{display: inline-block;}
      .zwpj .ti span{;background-color: #fc8622;width: 3px;height: 12px;margin-right: 6px}
      .zwpj .ti h4{color: #333;line-height: 15px;font-size: 15px;margin:0;margin-bottom: 10px;}
      .zwpj .te p{line-height: 26px;font-size: 12px;color: #999;margin: 0;}
      .clearfix{clear: both;}
      .zhpf{padding: 0 15px;margin-bottom: 15px;padding-bottom:28px;border-bottom: 1px solid #F0F0F0;width: 100%;box-sizing: border-box;}
      .zhpf .ti *{display: inline-block;}
      .zhpf .ti span{;background-color: #fc8622;width: 3px;height: 12px;margin-right: 6px}
      .zhpf .ti h4{color: #333;line-height: 15px;font-size: 15px;margin:0;margin-bottom: 15px;}
      .zhpf .con{width: 100%;box-sizing: border-box;}
      .zhpf .con .col{float: left;width:33.333333333%;position: relative;height: 116px;box-sizing: border-box;padding-right: 40px;}
        .zhpf .con .col:first-child+.col{padding-left: 10px;padding-right: 30px}
      .zhpf .con .col:first-child+.col+.col{padding-right: 0}
      .zhpf .con .col span{display: block;width:73px;height:73px;border-radius: 50%;text-align: center;background-color: #fff;border: 1px solid #fc8622;box-sizing: border-box;margin: 0 auto;}
      .zhpf .con .col span *{text-align: center;}
      .zhpf .con .col span h4{font-size: 15px;color: #333;padding-top: 22px;margin-bottom:9px;line-height: 11px;font-family: "Arial"}
      .zhpf .con .col span h5{font-size: 12px;color: #333;margin-top: 0;line-height: 12px;}
      .zhpf .con .col .te *{text-align: center;}
      .zhpf .con .col .te h6{margin: 9px 0;margin-bottom: 0px;}
      .zhpf .con .col .te p{color: #ABABAB;font-size: 12px;line-height: 10px;display:inline-block;margin: 0;margin-top: -2px;}
      .zhpf .con .col .te b{display: inline-block;width: 13px;height: 13px;box-sizing: border-box;;text-align:center;background-color: #f7261b;text-align: center;position: relative;border-radius: 2px;vertical-align:middle;}
      .zhpf .con .col .te b img{position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 7px;height:9px;}
    .zhpf .con .col .text{width: 53px;margin: 0 auto;}
    .gzpj{width: 100%;box-sizing: border-box;padding: 0 15px;}
    .gzpj .ti *{display: inline-block;}
    .gzpj .ti span{;background-color: #fc8622;width: 3px;height: 12px;margin-right: 6px}
    .gzpj .ti h4{color: #333;line-height: 15px;font-size: 15px;margin:0;margin-bottom: 20px;}
    .gzpj  .con{width: 100%;box-sizing: border-box;padding-bottom:10px;}
    .gzpj  .con .col{padding-bottom: 17px;border-bottom: 1px solid #F0F0F0;margin-bottom: 15px;width: 100%;position: relative;}
    .gzpj  .con .col  .top{margin-bottom: 14px}
    .gzpj  .con .col .img{width: 30px;height: 30px;margin-right: 8px;float: left;border-radius: 50%;overflow: hidden;}
    .gzpj  .con .col .img img{width: 100%;}
    .gzpj  .con .col .te{float: left;padding-top: 3px;width: 252px;box-sizing: border-box;}
      .gzpj  .con .col .te .tele{float: left;}
    .gzpj  .con .col .te h4{line-height:11px;color: #666666;font-family: "Adobe Heiti Std R";font-size: 12px;margin-bottom: 10px;margin-top: 0}
      .gzpj  .con .col .te h5{line-height:8px;color: #BEBEBE;font-family: "Arial";font-size: 11px;margin-top: 0}
    .gzpj  .con .col .te img{position: absolute;right: 0;height: 11px;top: 5px;}
      .gzpj  .con .col  p{color: #666;line-height: 15px;font-size: 13px;height: 15px;overflow: hidden;;text-overflow:ellipsis;margin: 0}
      button{ border: 0;background-color: transparent;border: 2px;outline: none;display: block;width: 100%;margin: 0 auto;;height: 40px;background-color: #fc8622;text-align: center;line-height: 40px;color:#fff;font-size: 13px;}
      .lxjs {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 10000;background-color: rgba(0,0,0,0.4);box-sizing:border-box;display: none}
      .lxjs  .box{position: absolute;left: 50%;top:50%;width:275px;height: 235px;background-color: #fff;box-sizing: border-box;overflow: hidden;;border-radius: 4px;transform: translate(-50%,-50%);}
      .lxjs .top{height:50px;background-image: url(../../image/jieshoubg.png);background-repeat: no-repeat;background-position:  center center;width: 100%;box-sizing: border-box;}
      .lxjs .top h4{color: #fff;text-align: center;padding-top:0px;line-height:60px;font-size: 12px;}
      .lxjs .top span{color: #fff;font-size: 12px;}
      .lxjs .text{width: 100%;box-sizing: border-box;padding: 0 36px;padding-top: 36px;margin-bottom: 30px;}
      .lxjs .box  .text .col{margin-bottom: 15px;position: relative;width: 100%;color: #999;font-size: 12px;vertical-align: middle;}
      .lxjs .box .text .col .img{width:15px;margin-right: 9px;display: inline-block;}
      .lxjs .box  .text .col img{display: block;margin: 0 auto;}
      .lxjs .box  .text .col span{ vertical-align: super;}
      .lxjs .box  .text .col:first-child img{width: 12px;height: 14px;}
      .lxjs .box  .text .col:first-child+.col img{width: 12px;height: 14px;}
      .lxjs .box  button{background-color: transparent;margin: 0;width: 203px;display: block;height:40px;text-align: center;margin: 0  auto;color: #fff;font-size: 13px;background-color:#fc8622;box-sizing: border-box;padding: 0;outline: none;border: 0;outline: none;}
      .lxjs .close{position: absolute;right: 10px;top:10px;width: 8px;height: 8px;}
      .lxjs .close img{display: block;width: 100%}
      .jjtc{position: fixed;left: 0;top: 0;width: 100%;height: 100%;box-sizing: border-box;background-color: rgba(0,0,0,0.25);z-index: 1000000;display: none;}
      .jjtc .box{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #fff;width:250px;min-height: 225px;padding-bottom: 20px;border-radius: 4px;box-sizing: border-box;;overflow:hidden}
      .jjtc .top{;width: 100%;height: 40px;background-image: -moz-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%); background-image: -ms-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%);}
      .jjtc .top h4{text-align: center;color: #fff;font-size: 12px;line-height: 40px;}
      .jjtc .box .close{position: absolute;top: 17px;right: 10px;width: 7px;height: 7px;cursor: pointer;}
      .jjtc .box .close img{width: 100%;display: block;}
      .jjtc .box .tetx{width: 100%;height: 120px;box-sizing: border-box;padding: 25px 24px;}
      .jjtc .box .tetx .col{min-width:96px;height: 30px;box-sizing: border-box;margin-right: 5px;border-radius: 2px;text-align: center;;color: #999;font-size: 12px;line-height: 30px;border: 1px solid #e7e7e7;float: left;margin-bottom: 10px;}

      .jjtc .box button{display: block;margin: 0 auto;width:203px;height: 40px;box-sizing: border-box;color: #fff;font-size: 13px;text-align: center;line-height: 40px;background-color: #fc8622;border-radius: 2px}
      .checked{color: #fc8622!important;border-color: #fc8622!important}
      #header{background-color:#fc6d4d}
      .clearfix{clear: both;}
      </style>
  </head>
  <body>
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-btn aui-pull-left" tapmode onclick="api.closeWin()">
            <span class="aui-iconfont aui-icon-left" style="font-size:14px;color:#fff"></span>
        </a>
        <div class="aui-title" style="font-size:14px;color:#fff">机手详情</div>

    </header>
<section  id="jishourw" >
  <div class="rw"   >
    <div v-for="site in renwu">
    <div class="img">
      <img :src="site.img" :alt="site.id">
    </div>
    <div class="te">
      <!-- v-if='site.icon'-->
    <h4>{{site.title==""?"未命名":site.title}}</h4><img class="le" src="../../image/renzheng.png"  v-if="site.ren">
     <p>{{site.nianling}}&nbsp;&nbsp;&nbsp;&nbsp;驾龄{{site.jialing}}&nbsp;&nbsp;&nbsp;&nbsp;{{site.type}}</p>
    </div>
      <div class="clearfix"></div>
      </div>
  </div>
<div class="zs"  id="zs">
  <div class="ti">
    <span></span>
    <h4>资格证书</h4>
  </div>
  <div class="img" >
  <div class="col">
    <img :src="zhengshu.img1"  @click="fangda(1)" class="zstp" id="img1">

  </div>
    <div class="col">
  <img :src="zhengshu.img2"  @click="fangda(2)" class="zstp" id="img2">
    </div>  <div class="col">
  <img :src="zhengshu.img3"  @click="fangda(3)" class="zstp" id="img3">
    </div>
  <div class="clearfix"></div>
  </div>
</div>
<div class="zwpj">
  <div class="ti">
    <span></span>
    <h4>自我评价</h4>
  </div>
  <div class="te" v-for="site in renwu">
    <p>{{site.text}}</p>
  </div>
</div>
<div class="zhpf">
  <div class="ti">
    <span></span>
    <h4>综合评分</h4>
  </div>
  <div class="con">
    <div class="col" v-for="site in zonghepingfen">
      <span>
        <h4>{{site.pinfen}}</h4>
        <h5>{{site.title}}</h5>
      </span>
        <div class="te">
        <h6>{{site.gaodi}}</h6>
        <div class="text">
          <p>{{site.bilv}}</p>
          <b><img src="../../image/show_ar.svg" alt=""></b>
        </div>
        </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
<div class="gzpj" id="guzhupingjia">
  <div class="ti">
    <span></span>
    <h4>雇主评价</h4>
  </div>
  <div class="con" >
    <div class="col" v-for="site in guzhupingjia">
      <div class="top">
      <div class="img">
        <img :src="site.img">
      </div>
      <div class="te">
        <div class="tele">
        <h4> {{site.type}}</h4>
        <h5>{{site.time}}</h5>
      </div>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
      </div>
      <p>{{site.text}}</p>
    </div>
  </div>
</div>
<div style="width:100%;padding:0 15px;box-sizing:border-box"><button id="canjia" type="button" @click="canjia();" tapmode>立即联系</button></div>
<!-- 联系机手 -->
<div class="lxjs" id="lxjs"  onclick="lxjsjoin()">
  <div class="box">
    <div class="top">
      <h4 style="font-size:18px">机手信息</h4>
    </div>

    <div class="text">
      <div class="col">
              <div class="img">
              <img src="../../image/lianxiren.png">
              </div>
              <span  v-for="site in renwu">联系人：{{site.title}}</span>
            </div>
            <div class="col">
              <div class="img">
              <img src="../../image/didian.png" alt="">
              </div>
          <b style="font-weight:normal;display:inline-block;vertical-align:text-top">  地   点：  <span  style="display:inline-block;width:10em;vertical-align:text-top" v-for="site in renwu">{{site.dizhi}}</span></b>
            </div>
    </div>

    <button onclick="yaoqing()">邀请参与</button>
    <div class="close" onclick="lxjsclose()">
      <img src="../../image/close1.png" alt="">
    </div>
  </div>
</div>



<div class="jjtc" id="jjtc">
  <div class="box">
    <div class="top">
          <h4>选择需要邀请的项目</h4>
    </div>
    <div class="tetx">
      <div class="jjly col" v-for="site in xinwen" @click="yq_ajax(site.id)">
        {{site.title}}
      </div>
      <div class="clearfix"></div>
    </div>
    <button onclick="xw_ajax()">换一批</button>
      <div class="close" id="cjclosetc1" onclick="clos()">
    <img src="../../image/close1.png" alt="">
  </div>
  </div>
</div>

</section>

  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
      <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript">
      apiready = function(){


        var header = $api.byId('header');
      headerH =  $api.fixStatusBar(header);
          api.parseTapmode();
          var header = $api.byId('aui-header');
          $api.fixStatusBar(header);
          jishourw = new Vue({
                     el: '#jishourw',
                       data: $tools.getdata()
          });
          id = api.pageParam.id
          api.showProgress({
              style: 'default',
              animationType: 'fade',
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });

          ajax();
      };
var jishourw,id;
var limt=0;
      function canjia(){
        var lxjs=$api.byId('lxjs');
        $api.css(lxjs, 'display:block');
      }
      //接受邀请
function lxjsjoin(){
var canjia=$api.byId('canjia');
  $api.text(canjia, '已参加项目');
  $api.css(canjia, 'background-color: #999');
var lxjs=$api.byId('lxjs');
$api.css(lxjs, 'display:none');
}
//点关闭
function lxjsclose() {
  var lxjs=$api.byId('lxjs');
  $api.css(lxjs, 'display:none');
}
function qiehuan(){
    shoucang = $api.byId('soucang');
    console.log();
    if($api.attr(shoucang,'alt')==1){
      $api.attr(shoucang,'src','../../image/collection_n.png');
      $api.attr(shoucang,'alt','2');
      api.toast({
          msg: '收藏成功',
          duration: 2000,
          location: 'bottom'
      });
    }else{
      $api.attr(shoucang,'src','../../image/collection.png');
      $api.attr(shoucang,'alt','1');
      api.toast({
          msg: '取消成功',
          duration: 2000,
          location: 'bottom'
      });
    }

}

var zstpimg = document.getElementById("zs").getElementsByTagName("img");

          var length = zstpimg.length;

          for (var i = 0; i < length; i++) {
              zstpimg[i].index = i;
              zstpimg[i].onclick = function() {
    var zstpimgsrc=zstpimg[this.index].attr("src");
  //  console.log(zstpimgsrc)

              }
          };




function fangda(data) {
  if(data==1){
      var tu = $api.attr($api.byId("img1"), 'src');
  }else if(data==2){
      var tu = $api.attr($api.byId("img2"), 'src');
  }else if(data==3){
      var tu = $api.attr($api.byId("img3"), 'src');
  }else{
    var tu=""
  }
  console.log(data)
  console.log(tu)
api.openWin({
    name: 'fdpic',
    url: 'fdpic.html',
    pageParam: {
        img:tu
    }
});

}


function ajax(){
  api.ajax({
      url: $api.getStorage("backapi")+'/index.php?s=jishou&c=home&m=show_ajax&uid='+id,
      method: 'get',
  },function(ret, err){
      if (ret) {

          jishourw.renwu=ret.status.renwu;
          jishourw.guzhupingjia=ret.status.guzhupingjia;
          jishourw.zonghepingfen=ret.status.zonghepingfen;
          // console.log(JSON.stringify(ret));
          // xw_ajax();
      } else {
        //  console.log( JSON.stringify( err ) );
      }
  });
 jilu();
}

function jilu(){
  var aj = 0,xx=0;
  api.ajax({
      url: $api.getStorage("backapi")+'/uploadfile/zhengjian/'+id+'/1/800x800.jpeg',
      method: 'GET',
  },function(ret, err){
      if (err.statusCode=='200') {
        api.imageCache({
            url: $api.getStorage("backapi")+'/uploadfile/zhengjian/'+id+'/1/800x800.jpeg',
            policy:'cache_else_network '
        }, function(ret, err){

  $api.attr($api.byId("img1"), 'src', ret.url);
                 aj++
                 if(aj+xx>3){
                   api.hideProgress();
                   api.refreshHeaderLoadDone()
                 }
        });
      }else {
        xx++
        if(aj+xx>3){
          api.hideProgress();
          api.refreshHeaderLoadDone()
        }
      }
  });
  api.ajax({
      url:  $api.getStorage("backapi")+'/uploadfile/zhengjian/'+id+'/2/800x800.jpeg',
      method: 'GET',
  },function(ret, err){

    if (err.statusCode=='200') {
      api.imageCache({
          url:  $api.getStorage("backapi")+'/uploadfile/zhengjian/'+id+'/2/800x800.jpeg',
              policy:'cache_else_network '
      }, function(ret, err){

                 $api.attr($api.byId("img2"), 'src', ret.url);
               aj++
               if(aj+xx>3){
                 api.hideProgress();
                 api.refreshHeaderLoadDone()
               }
      });
    } else {
      xx++
      if(aj+xx>3){
        api.hideProgress();
        api.refreshHeaderLoadDone()
      }
    }
    //  console.log(JSON.stringify(ret));
  //    console.log(JSON.stringify(err));

  });
  api.ajax({
      url:  $api.getStorage("backapi")+'/uploadfile/zhengjian/'+id+'/3/800x800.jpeg',
      method: 'GET',
  },function(ret, err){
    if (err.statusCode=='200') {
      api.imageCache({
          url:  $api.getStorage("backapi")+'/uploadfile/zhengjian/'+id+'/3/800x800.jpeg',
              policy:'cache_else_network '
      }, function(ret, err){

var img3 =  $api.getStorage("backapi")+'/uploadfile/zhengjian/'+id+'/3/800x800.jpeg'

  $api.attr($api.byId("img3"), 'src',  ret.url);


               aj++
               if(aj+xx>3){
                 api.hideProgress();
                 api.refreshHeaderLoadDone()
               }


      });
    } else {

      xx++
      if(aj+xx>3){
        api.hideProgress();
        api.refreshHeaderLoadDone()
      }
    }
  });
  api.hideProgress();
  api.refreshHeaderLoadDone()

}




function xw_ajax(){

  api.ajax({
      url: $api.getStorage("backapi")+'/index.php?s=jishou&c=home&m=show_ajax&uid='+$api.getStorage("member"),
      method: 'post',
      data: {
          values: {
              limt: limt
          },
      }
  },function(ret, err){
      if (ret) {
        if(ret.status==""){
          // api.toast({
          //     msg: '没有更多了',
          //     duration: 2000,
          //     location: 'bottom'
          // });
        }else{
          jishourw.xinwen=ret.status;
          console.log(JSON.stringify(ret.status));
          limt+=4;
        }

      } else {
          //console.log( JSON.stringify( err ) );
      }
  });

jilu()
}

function yaoqing(){
      $api.css($api.byId("jjtc"), 'display:block');

}


function yq_ajax(data){
    api.ajax({
        url: $api.getStorage("backapi")+'/index.php?s=jishou&c=home&m=yq_ajax&uid='+id+'&xid='+data,
        method: 'post',
    },function(ret, err){
        if (ret) {
            console.log(JSON.stringify(ret));
            $api.css($api.byId("jjtc"), 'display:none');
            api.toast({
                msg: '邀请成功',
                duration: 2000,
                location: 'bottom'
            });


        } else {
            //console.log( JSON.stringify( err ) );
        }
    });


}


function clos(){
  $api.css($api.byId("jjtc"), 'display:none');
}

  </script>
  </html>
